<template>
    <div class="mavon-editor-con">
        <mavon-editor :editable=editable :subfield="subfield" :toolbars="toolbars" ref="md" @change="changeVal" v-model="value" @imgAdd="addImg" />
    </div>
</template>
<script>
    import $ from "jquery";
    import axios from "axios";
    export default {
        props: ["editable"],
        data() {
            return {
                value: "",
                renders: "",
                subfield: false,
                //简约工具栏-用于有实验窗口的编辑器，自行覆盖

                // toolbars: {
                //   bold: true, // 粗体
                //   italic: false, // 斜体
                //   header: true, // 标题
                //   //underline: true, // 下划线
                //   //strikethrough: true, // 中划线
                //   //mark: true, // 标记
                //   //superscript: true, // 上角标
                //   //subscript: true, // 下角标
                //   quote: true, // 引用
                //   ol: true, // 有序列表
                //   ul: true, // 无序列表
                //   //link: true, // 链接
                //   imagelink: true, // 图片链接
                //   code: true, // code
                //   table: true, // 表格
                //   //fullscreen: true, // 全屏编辑
                //   //readmodel: true, // 沉浸式阅读
                //   //htmlcode: true, // 展示html源码
                //   help: true, // 帮助
                //   /* 1.3.5 */
                //   //undo: true, // 上一步
                //   //redo: true, // 下一步
                //   //trash: true, // 清空
                //   //save: true, // 保存（触发events中的save事件）
                //   /* 1.4.2 */
                //   //navigation: true, // 导航目录
                //   /* 2.1.8 */
                //   alignleft: true, // 左对齐
                //   aligncenter: true, // 居中
                //   alignright: true, // 右对齐
                //   /* 2.2.1 */
                //   //subfield: true, // 单双栏模式
                //   preview: true // 预览
                // },
                toolbars: {
                    //默认工具栏
                    bold: true, // 粗体
                    //italic: false, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    //mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    //link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    //readmodel: true, // 沉浸式阅读
                    //htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    //trash: true, // 清空
                    // save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    //navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true // 预览
                }
            };
        },
        methods: {
            changeVal(val, renders) {
                this.value = val;
                this.renders = renders;
                return val;
            },
            getContent() {
                return this.value;
            },
            getRender() {
                return this.renders;
            },
            addImg(pos, $file) {
                let that = this;
                // 第一步.将图片上传到服务器.
                var formdata = new FormData();
                formdata.append("image", $file);
                axios({
                    url: "/tes/markdown/picture",
                    method: "post",
                    data: formdata,
                    headers: { "Content-Type": "multipart/form-data" }
                }).then(url => {
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                    // $vm.$img2Url 详情见本页末尾
                    if (url.status == 200) {
                        if (url.data.code == 200) {
                            let result = url.data.data;
                            //console.log(that.$refs.md);
                            //console.log(result);
                            that.$refs.md.$img2Url(pos, result);
                            //console.log(that.$refs.md, 44444);
                        } else {
                            that.$message({
                                message: "图片上传失败",
                                type: "error"
                            });
                        }
                    }
                });
            }
        }
    };
</script>
<style>
    .mavon-editor-con .op-icon.fa.fa-mavon-trash-o {
        display: none !important;
    }
</style>
